<div>
  <p ng-if="prefixes.length === 0">
    No prefixes found.
  </p>
  <p ng-if="prefixes.length > 0">
    <strong>Class Prefixes</strong>
    <strong ng-if="vm.numberOfPrefixes < prefixes.length">
      ({{ vm.numberOfPrefixes}} of {{ prefixes.length }})
    </strong>
    <strong ng-if="vm.numberOfPrefixes >= prefixes.length">
      ({{ prefixes.length }}):
    </strong>
  </p>
  <div class="prop-list" style="max-height: 140px;" ng-if="prefixes.length > 0">
    <table class="table table-condensed">
      <tr ng-repeat="pre in prefixes | limitTo: vm.numberOfPrefixes">
        <td>
          <button type="button" class="btn btn-default btn-xs" ng-model="pre.classification" uib-btn-checkbox
                  btn-checkbox-true="'intern'" btn-checkbox-false="'extern'" ng-click="vm.updatePrefixes()">
            internal
          </button>
        </td>

        <td class="prefix-table" style="max-width: 150px; word-wrap: break-word;">
          <a href="{{pre.prefix}}" target="_blank">{{pre.prefix | httpLess}}</a>
        </td>

        <td class="prefix-table">
          {{pre.value}}
        </td>

      </tr>
    </table>
    <button ng-hide="prefixes.length <= vm.numberOfPrefixes" type="button" class="btn btn-link"
            ng-click="vm.incNumberOfPrefixes()">
      show more ...
    </button>
  </div>
</div>
